<template>
  <div class="all">
      <div class="top">
          <div class="wrapper">
              <!-- 通过移入移出事件来显示不同的图片 -->
            <div class="left" 
            @mouseenter="isexithover=true" 
            @mouseleave="isexithover=false">
                <img v-show="!isexithover" :src="exit" alt="">
                <img v-show="isexithover" :src="exitActive" alt="">
                <div class="visit-item">
                    <h2>New Visits</h2>
                    <!-- <animate-number from="1" :to="visits"></animate-number> -->
                    <runingnum :runnum="visits"></runingnum>
                    <!-- <span>{{visits}}</span> -->
                </div>
            </div>
            <div class="center"
            @mouseenter="iscenterhover=true" 
            @mouseleave="iscenterhover=false">
                <img v-show="!iscenterhover" :src="incenter" alt="">
                <img v-show="iscenterhover" :src="centerActive" alt="">
                <div class="visit-item">
                    <h2>Goods</h2>
                    <runingnum :runnum="goodnumber"></runingnum>
                    <!-- <span>{{goodnumber}}</span> -->
                </div>
            </div>
            <div class="right" id="entermessage"
            @mouseenter="ismesshover=true" 
            @mouseleave="ismesshover=false">
                <img v-show="!ismesshover" :src="inmess" alt="">
                <img v-show="ismesshover" :src="messActive" alt="">
                <div class="visit-item">
                    <h2>Message</h2>
                    <!-- <span>{{ismessagenum}}</span> -->
                    <runingnum :runnum="ismessagenum"></runingnum>
                </div>
            </div>
            <div class="right">
                <img src="../../../assets/friend.png" alt="">
                <div class="visit-item">
                    <h2>New Visits</h2>
                    <span>{{visits}}</span>
                </div>
            </div>
          </div>
      </div>
      <div id="main"></div>
      <div id="main1"></div>
      <div id="timeclock">
          <el-calendar v-model="timevalue" />
      </div>
      <allmessage></allmessage>
  </div >
</template>

<script>
import runingnum from './runingnum.vue'

import allmessage from '../../../components/allmessage/allmessage.vue'

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  //用户等级数量
  VisualMapComponent,
  
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';


echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  
  VisualMapComponent,
  PieChart,
  LabelLayout,

]);




export default {
    name: 'admin',
    components: {
        allmessage,
        runingnum
    },
    data() {
        return {
            visits: Number(localStorage.getItem('usernum')),
            goodnumber: Number(localStorage.getItem('goodnum')),
            ismessagenum: 0,

            isexithover: false,
            exit: require("../../../assets/friend.png"),
            exitActive: require("../../../assets/frieacitve.png"),

            iscenterhover: false,
            incenter: require("../../../assets/good.png"),
            centerActive: require("../../../assets/goodactive.png"),

            ismesshover: false,
            inmess: require("../../../assets/message.png"),
            messActive: require("../../../assets/messageactive.png"),

            timevalue: new Date()
        }
    },
    mounted() {
        
        var chartDom1 = document.getElementById('main1');
        var myChart1 = echarts.init(chartDom1);
        var option1;
        option1 = {
        // backgroundColor: '#2c343c',
        backgroundColor: '#fff',
        title: {
            text: 'User Level',
            left: 'center',
            top: 20,
            textStyle: {
            color: '#63c7ca'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        visualMap: {
            show: false,
            min: 1,
            max: 10,
            inRange: {
            colorLightness: [0, 1]
            }
        },
        series: [
            {
            name: 'User Number',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                // { value: 335, name: 'Direct' },
                { value: Number(localStorage.getItem('vipuser')), name: '会员用户' },
                { value: Number(localStorage.getItem('normaluser')), name: '普通用户' },
                { value: Number(localStorage.getItem('visituser')), name: '游客用户' },
                // { value: 400, name: 'Search Engine' }
            ].sort(function (a, b) {
                return a.value - b.value;
            }),
            roseType: 'radius',
            //饼图所指文字样式
            label: {
                // color: 'rgba(255, 255, 255, 0.8)'
                // color: '#63c7ca'
                color: '#00bdbd',
                fontWeight:'bolder',
                fontSize: '20px'
            },
            labelLine: {
                lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            //中心饼图样式
            itemStyle: {
                color: '#63c7ca',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function () {
                return Math.random() * 200;
            }
            }
        ]
        };
        option1 && myChart1.setOption(option1);


        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        title: {
            text: 'Order Number Chart',
            textStyle: {
            color: '#63c7ca'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
            }
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        toolbox: {
            feature: {
            saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        ],
        yAxis: [
            {
            type: 'value'
            }
        ],
        series: [
            {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            label: {
                show: true,
                position: 'top'
            },
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
        };

        option && myChart.setOption(option);
        let checkmessage = JSON.parse(localStorage.getItem('messagelist'))
        if(checkmessage){
            this.ismessagenum = checkmessage.length
        }
    }
}
</script>

<style scoped>
.all {
    width: 100%;
    height: 100%;
    background-color: rgb(238, 238, 238);
    overflow: hidden;
}
.top {
    overflow: hidden;
    display: flex;
    /* margin-top: 20px;
    margin-bottom: 20px; */
    box-sizing: border-box;
    margin: 20px 0 10px 0;
    width: 100%;
    height: 125px;
    
    /* background-color: green; */
}
.wrapper {
    margin: 0 auto;
}
/* .wrapper div {
    
    display: inline-block;
    margin-right: 50px;
    border-radius: 8px;
    box-shadow: 1px 1px 4px #ccc;
    box-sizing: border-box;
} */
.wrapper div img {
    margin-left: 30px;
    margin-top: 20px;
    width: 80px;
    height: 80px;
    padding: 5px;
}
.left {
    display: inline-block;
    margin-right: 50px;
    border-radius: 8px;
    box-shadow: 1px 1px 4px #ccc;
    box-sizing: border-box;

    width: 460px;
    height: 120px;
    background-color: #fff;
}
.left img {
    border-radius: 8px;
}
.left:hover img{
    background-color: #63c7ca;
}
.center img {
    border-radius: 8px;
}
.center:hover img {
    background-color: #63c7ca;
}
#entermessage img {
    border-radius: 8px;
}
#entermessage:hover img {
    background-color: #63c7ca;
}
.visit-item {
    float: right;
    margin-top: 25px;
    margin-right: 30px;
}
.visit-item h2 {
    color: rgb(160, 159, 159);
}
.visit-item span {
    display: inline-block;
    width: 100%;
    margin-top: 6px;
    font-size: 28px;
    font-weight:700;
    text-align: center;
}
.center {
    display: inline-block;
    margin-right: 50px;
    border-radius: 8px;
    box-shadow: 1px 1px 4px #ccc;
    box-sizing: border-box;

    width: 460px;
    height: 120px;
    background-color: #fff;
} 
.right {
    display: inline-block;
    margin-right: 50px;
    border-radius: 8px;
    box-shadow: 1px 1px 4px #ccc;
    box-sizing: border-box;

    width: 460px;
    height: 120px;
    background-color: #fff;
}
#main {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 480px;
    box-shadow: 1px 0px 4px #ccc;
}
#main1 {
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    background-color: rgb(255, 255, 255);
    width: 600px;
    height: 650px;
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 10px;
}
#timeclock {
    float: left;
    margin-top: 10px;
    margin-left: 50px;
    background-color: #fff;
    width: 600px;
    height: 630px;
    box-shadow: 2px 2px 4px #ccc;
    border-radius: 10px;
    /* overflow: hidden; */
}
</style>